<template>
  <div class="">
    <el-row :gutter='20'>
        <el-col :span='4'>
            <el-card style="min-height:600px" v-if="this.index!=0">
                <left @changgeCom='changgeCom' :data='data' />
            </el-card>
        </el-col>
        <el-col :span='20'>
          <el-card class="main">

            <mainComponent  
                :code="path+childPath">
                
            </mainComponent>
          </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import left from '../leftMenu/leftMenu.vue'
import mainComponent from  '../components/dataMain.vue'
export default {
  name: 'hzjmain',
  props: {
    msg: String
  },
  components: {
    mainComponent,
    left       
  },
  data () {
      return {
          path: 'views/module/',
          index:'1',
          childPath:'el-ui/elui',
          defaultProps: {
              children: 'children',
              label: 'label'
          },
          data:[
            {
              label: '首页',
            },{
              label: 'el-ui',
              path:'el-ui/elui'
            },{
              label: 'html',
              path: 'html/html',
            },{
              label: 'css',
              path: 'css/css',
            },{
              label: 'vue',
              path: 'vue/vue',
            }
          ]
      }
  },
  methods:{
      
      changgeCom(path){
        if(path){
          this.childPath=path
        }
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
